import { Button, Form, Input, Select, Switch, Cascader } from "antd";
import React from "react";
import { categoryGet, categoryPost } from "@/api/course";
import ImgUpload from "../../components/img-upload";
import RichEditor from "../../components/rich-editor";
import { dataToTree } from "../../utils/tools";
import { articlePost } from "../../api/course";
const { TextArea } = Input;
const { Option } = Select;
const layout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 16,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 16,
  },
};
const initData = {
  name: "追踪卡片 AirCard 成功众筹：支持苹果 Find My，可塞入钱包1",
  intro: `AirCard 是支持苹果 Find My 的追踪设备，体积接近于信用卡，可以塞入钱包中用于追踪定位
    ... 和其它第三方「Find My」追踪设备一样，AirCard 无法使用 AirTags 的精确查找功能`,
  vip: true,
};
class ArticlePub extends React.Component {
  formRef = React.createRef();
  state = {
    cateList: [],
  };
  componentDidMount() {
    categoryGet(true).then((res) => {
      let cateList = dataToTree(res.data.results);
      this.setState({
        cateList,
      });
    });
  }
  onFinish = (values) => {
    console.log(values);
    let [lv1, lv2] = values.category;
    values.lv1 = lv1;
    values.lv2 = lv2 ? lv2 : "";
    articlePost(values);
  };
  onReset = () => {
    this.formRef.current.resetFields();
  };
  onFill = () => {
    this.formRef.current.setFieldsValue({
      note: "Hello world!",
      gender: "male",
    });
  };

  render() {
    let { cateList } = this.state;
    return (
      <Form
        {...layout}
        ref={this.formRef}
        name="control-ref"
        onFinish={this.onFinish}
        initialValues={initData}
      >
        <Form.Item
          name="name"
          label="课程名称"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="poster"
          label="课程封面"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <ImgUpload />
        </Form.Item>
        <Form.Item
          name="category"
          label="归属分类"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Cascader
            options={cateList}
            fieldNames={{ label: "name", value: "name" }}
            placeholder="请选择课程类目"
          />
        </Form.Item>
        <Form.Item
          name="vip"
          label="是否收费"
          valuePropName="checked"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Switch />
        </Form.Item>
        <Form.Item
          name="intro"
          label="课程简介"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <TextArea />
        </Form.Item>
        <Form.Item
          name="detail"
          label="课程详情"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <RichEditor />
        </Form.Item>

        <Form.Item {...tailLayout}>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
          <Button htmlType="button" onClick={this.onReset}>
            重置
          </Button>
          <Button type="link" htmlType="button" onClick={this.onFill}>
            Fill form
          </Button>
        </Form.Item>
      </Form>
    );
  }
}
export default ArticlePub;
